<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item icon="nlyfont nly-icon-home-fill" to="/" text="首页" />
      <nly-breadcrumb-item icon="nlyfont nly-icon-outlet" to="/shop1/goods" active text="mini盲盒列表管理" />
    </nly-breadcrumb>
    <Modal v-model="modal2" width="1050px" @on-cancel="cancel">
      <p style="margin: 0; color: rgb(255, 102, 0); text-align: center" slot="header">
        <span v-if="!update">
          <Icon type="ios-add-circle-outline" style="margin-right: 5px" />
          <span>添加</span>
        </span>
        <span v-else>
          <Icon type="md-create" style="margin-right: 5px" />
          <span>修改</span>
        </span>
      </p>
      <div>
        <div class="content" style="padding-left: 10px">
          <row>
            <i-col :md="6" :sm="12">
              <Input v-model="searchText" search placeholder="请输入商品名称搜索" enter-button="搜索"
                @on-search="searchgoods(searchText)" />
            </i-col>

            <i-col :md="10" :sm="14">
              <Select v-model="data.type_name" @on-change="change_type" style="width: 200px; margin-left: 16px"
                placeholder="请选择商品分类">
                <Option v-for="(item, index) in count_scale" :value="item.type" :key="index">{{ item.type }}</Option>
              </Select>
            </i-col>
          </row>
          <br />
          <Table border size="small" :columns="tableheadergoods" :data="goodslistgoods" @on-selection-change="enterall">
            <template slot-scope="{ row }" slot="img">
              <img v-if="arrSplit(row.img)"  :src="arrSplit(row.img)" width="60"
                height="60" style="padding: 3px" class="image" />
            </template>
          </Table>
        </div>
        <div class="Page">
          <Page :total="total" show-elevator show-total :page-size="data.pageSize" :current="data.page"
            @on-change="get_pagegoods" />
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" :loading="loading" @click="save">保存</Button>
        <Button @click="modal2 = false">取消</Button>
      </div>
    </Modal>
    <Modal title="修改数量" :styles="{ width: '30%' }" v-model="modalText" class-name="vertical-center-modal"
      :footer-hide="true">
      <div>
        <Form ref="data" :model="datas" :label-width="200">
          <FormItem label="mini盒子数量（不能小于1）" prop="number">
            <InputNumber :min="1" v-model="datas.number" :active-change="false" placeholder="请输入数量（不能小于1）" />
          </FormItem>
          <FormItem>
            <Button type="primary" @click="AddText('data')">提交</Button>
            <Button @click="modalTextcal()" style="margin-left: 8px">取消</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <div class="content" style="padding-left: 10px">
      <row>
        <i-col :md="10" :sm="12">
          <i-button type="primary" style="margin-left: 16px" @click="create" icon="md-add">添加盲盒</i-button>
        </i-col>
      </row>
      <br />
      <Table border size="small" :columns="tableheader" :data="goodslist" @on-selection-change="enterall">
        <template slot-scope="{ row }" slot="img">
          <img  :src="row.img" width="60" height="60" style="padding: 3px" class="image" />
        </template>
        <template slot-scope="{ row }" slot="go_istype">{{
          row.go_istype == 0 ? "否" : row.go_istype == 1 ? "是" : "未知"
        }}</template>


        <template slot-scope="{ row }" slot="action">
          <Button style="margin-left: 16px" type="primary" size="small" @click="changenum(row)"
            icon="md-close">修改数量</Button>
          <Button style="margin-left: 16px" type="error" size="small" @click="remove(row.id)"
            icon="md-close">删除</Button>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
  import apis from "@/api/shop1";
  export default {
    components: {},
    data() {
      return {
        count_scale: [], 
        go_home_page: [],
        classname: [],
        videolist: [],
        searchText: "",
        update: false,
        total: 0, 
        modalText: false,
        modal2: false,
        loading: false,
        data: {
          page: 1,
          pageSize: 10,
          name: "",
          type_name: "",
        },
        datas: {
          number: 1,
        },
        tableheadergoods: [{
            type: "selection",
            width: 100,
            align: "center",
          },
          {
            title: "ID",
            key: "id",
            width: 90,
            align: "center",
          },
          {
            title: "商品名称",
            key: "name",
            align: "center",
            tooltip: true,
          },
          {
            title: "图片",
            slot: "img",
            width: 230,
            align: "center",
          },
          {
            title: "金额",
            key: "price",
            align: "center",
          },
          {
            title: "数量",
            key: "inventory",
            align: "center",
          },
          {
            title: "预售时间",
            key: "sellTime",
            align: "center",
          },
          {
            title: "排序值",
            key: "sort",
            align: "center",
          },
        ],
        goodslistgoods: [],
        dataText: {
          img: "",
          name: "",
          price: "",
          type: 1,
          state: 1,
        },
        tableheader: [{
            title: "所属盲盒名称",
            key: "name",
            align: "center",
            tooltip: true,
          },
          {
            title: "所属盲盒图片",
            slot: "img",
            align: "center",
          },
          {
            title: "数量",
            key: "number",
            align: "center",
            tooltip: true,
          },
          
          {
            title: "操作",
            slot: "action",
            width: 300,
            fixed: "right",
            align: "center",
          },
        ],
        goodslist: [],
        enteralldata: [],
      };
    },
    created() {
      this.getperson();
      this.getGoods();
      this.lookrecord();
    },
    methods: {
      changenum(row) {
        this.datas.number = row.number
        this.modalText = true,
          this.datas.mallId = row.mallId,
          this.datas.boxId = this.$route.query.id
      },
      AddText(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let data = this.datas;
            console.log(data);
            apis.changemanghenumber(data).then((response) => {
              if (response.data.code == 0) {
                this.modalText = false;
                this.$Message.success("修改成功");
                this.datas.number = "";
                this.datas.id = "";
                this.$refs.data.resetFields();
                this.getperson();
              } else {
                this.$Message.error("修改失败");
              }
            });
          } else {
            this.modalText = false;
            this.$Message.error("Fail!");
            this.$refs.data.resetFields();
          }
        });
      },
      enterall(e) {
        this.enteralldata = e;
        console.log(e);
      },
      getGoods() {
        apis.getGoods(this.data).then((response) => {
          if (response.data.code == 0) {
            this.goodslistgoods = response.data.data.list;
            this.go_home_page = (this.goodslistgoods.img || "").split(",");

            this.total = response.data.data.total;
          } else {
            this.$Message.error("请求失败!");
          }
        });
      },
      get_pagegoods(page) {
        this.data.page = page;
        this.getGoods();
      },
      change_type(val) {
        console.log(val);
        this.data.type_name = "";
        this.data.type_name = val;
        this.getGoods();
      },
      searchgoods(val) {
        this.data.page = 1;
        let data = this.data;
        data.name = val;
        this.getGoods();
      },
      lookrecord() {
        var _this = this;
        apis
          .gettypelist({
            page: 1,
            pageSize: 100000,
          })
          .then((response) => {
            console.log(response);
            if (response.data.code == 0) {
              _this.count_scale = response.data.data.list;
              this.loading = false;
            } else {
              this.$Message.error("请求失败!");
            }
          })
          .catch((error) => {
            console.log(error);
            this.loading = false;
            this.$Message.error("请求失败!");
          });
      },
      arrSplit(str) {
        if ((str || "").split(",")[0]) {
          return str.split(",")[0];
        } else {
          return "";
        }
      },
      change_upNew(id, val) {
        let data = {
          id: id,
          state: val,
        };
        apis
          .uplist(data)
          .then((response) => {
            if (response.data.code == 0) {
              this.$Message.success("修改成功");
            } else {
              this.$Message.error("修改失败!");
            }
          })
          .catch((error) => {
            console.log(error);
            this.$Message.error("修改失败!");
          });
      },
      deleteimg(index) {
        this.go_home_page.splice(index, 1);
      },
      confirm_images(val) {
        console.log(val);
        this.dataText.img = val[0];
      },

      deletevideo(index) {
        this.videolist.splice(index, 1);
      },
      confirm_video(val) {
        this.videolist.push(...val);
      },
      getperson() {
        apis.getlistmini({
          boxId: this.$route.query.id
        }).then((response) => {
          if (response.data.code == 0) {
            this.goodslist = response.data.data;
            this.total = response.data.data.countNumber;
          } else {
            this.$Message.error("请求失败!");
          }
        });
      },
      get_page(page) {
        this.data.page = page;
        this.getperson();
      },
      search(val) {
        this.data.page = 1;
        let data = this.data;
        data.name = val;
        this.getperson();
      },
      create() {
        this.dataText.name = "";
        this.dataText.img = "";
        this.dataText.price = "";
        this.modal2 = true;
        this.update = false;
      },
      changegoods(e) {
        console.log(e);
        this.dataText.name = e.name;
        this.dataText.img = e.img;
        this.dataText.price = e.price;
        this.dataText.id = e.id;
        this.modal2 = true;
        this.update = true;
      },
      save() {
        this.loading = true;

        this.enteralldata.map((itme) => {
          itme.boxId = this.$route.query.id;
        });
        apis
          .addlistmini({
            jsonObject: JSON.stringify(this.enteralldata),
          })
          .then((response) => {
            this.loading = false;
            if (response.data.code == 0) {
              this.$Message.success("添加成功！");
              this.modal2 = false;
              this.getperson();
            } else {
              this.$Message.error("添加失败");
            }
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
            this.$Message.error("添加失败!");
          });
      },
      remove(id) {
        
        this.$Modal.confirm({
          title: "删除确认",
          content: `确定删除该盲盒下系列小盲盒？删除后无法恢复`,
          onOk: () => {
            apis
              .delete_listmangheone({
                id: id,
                boxId: this.$route.query.id
              })
              .then((response) => {
                if (response.data.code == 0) {
                  this.getperson();
                  this.$Message.success("删除成功");
                } else {
                  this.$Message.error("删除失败");
                }
              })
              .catch((error) => {
                console.log(error);
                this.$Message.error("删除失败!");
              });
          },
          onCancel: () => {},
        });
      },
      cancel() {
        this.dataText.id = "";
        this.dataText.name = "";
        this.dataText.price = "";
        this.dataText.img = "";
        this.modal2 = false;
        this.update = false;
      },
    },
  };
</script>

<style scoped>
  .ivu-modal {
    width: 50% !important;
  }

  .ivu-btn {
    margin-bottom: 0px;
  }

  .Page {
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
  }

  .image {
    max-width: 400px;
    max-height: 200px;
    margin: 10px;
  }

  .formItemImage {
    display: flex;
    justify-items: left;
    align-items: center;
    flex-wrap: wrap;
  }

  .formItemImage .ivu-col {
    margin-bottom: 16px;
  }

  .formItemImage img {
    height: 100%;
  }

  .button_large {
    padding: 0px 20px;
  }

  .ivu-input-number {
    width: 100% !important;
  }
</style>